{% extends '_base.html' %}

<!-- display sidebar on right -->
{% set __sidebar_right__ = true %}

{% block nav %} /discuss {% endblock %}

{% block title %}{{ _('New Topic') }}{% endblock %}

{% block head %}

<style>
    .x-discuss-visible {
        display: block;
    }
</style>

<script>
    $(function () {
        let
            $form = $('#topic-form'),
            $name = $form.find('input[name=name]'),
            $content = $form.find('textarea[name=content]'),
            $cancel = $form.find('button.x-cancel'),
            editor = new Simditor({
                textarea: $content,
                toolbarFloatOffset: 50,
                toolbar: ['title', '|', 'bold', 'italic', 'strikethrough', '|', 'blockquote', 'code', 'link', '|', 'ol', 'ul']
            });
        $form.submit(function (e) {
            e.preventDefault();
            let
                name = $name.val().trim(),
                content = $content.val().trim();
            if (name === '') {
                return $form.showFormError('Please input title');
            }
            if (content === '') {
                return $form.showFormError('Please input content');
            }
            $form.postJSON('/api/boards/{{ board.id }}/topics', {
                refType: 'NONE',
                name: name,
                content: html2md(content)
            }, function (err, r) {
                if (err) {
                    return $form.showFormError(translateError(err));
                }
                location.assign('/discuss/{{ board.id }}');
            });
        });

        $cancel.click(function () {
            location.assign('/discuss/{{ board.id }}');
        });
    });
</script>
{% endblock %}

{% block content %}

<div class="uk-alert x-discuss-nav">
    <a href="/discuss">{{ _('Discuss') }}</a>
    /
    <a href="/discuss/{{ board.id }}">{{ board.name }}</a>
    /
    {{ _('New Topic') }}
</div>

<div class="uk-margin uk-clearfix">
    <a href="/discuss/{{ board.id }}" class="uk-button uk-float-left">
        <i class="uk-icon-arrow-left"></i> {{ _('Back') }}</a>
</div>

<form id="topic-form" class="uk-form uk-form-stacked">
    <legend>{{ _('New Topic') }}</legend>
    <fieldset>
        <div class="uk-alert uk-alert-danger uk-hidden"></div>
        <div class="uk-form-row">
            <label class="uk-form-label">Title:</label>
            <div class="uk-form-controls">
                <input type="text" name="name" placeholder="Title" maxlength="100" style="width:100%">
            </div>
        </div>
        <div class="uk-form-row">
            <label class="uk-form-label">{{ _('Content') }}:</label>
            <div class="uk-form-controls">
                <textarea id="content" name="content"></textarea>
            </div>
        </div>
        <div class="uk-form-row">
            <div class="uk-form-controls">
                <button type="submit" class="uk-button uk-button-primary">
                    <i class="uk-icon-check"></i> {{ _('Post') }}</button>
                &nbsp;
                <button type="button" class="uk-button x-cancel">
                    <i class="uk-icon-times"></i> {{ _('Cancel') }}</button>
            </div>
        </div>
    </fieldset>
</form>

{% endblock %}

{% block sidebar_right_content %}

{% endblock %}